<template>
  <div ref="lineChart04" class="line-chart-04 chart"></div>
</template>

<script setup>
import { onMounted, ref, inject } from 'vue'

const lineChart04 = ref(null)
const echarts = inject('$echarts')

// 参数
let xAxisData = ['1月', '3月', '5月', '7月', '9月', '11月'];
let seriesData = [
  {
    name: '产值',
    data: [15, 20, 30, 35, 40, 44]
  },
  {
    name: '销售收入',
    data: [8, 12, 20, 26, 35, 38]
  }
];

const option = {
  compCode: 'C202310031',
  backgroundColor: '#061326',
  legend: {  // 图例
    top: "2%", // 设置图例向下偏移
    right: "4%",
    itemGap: 35,
    textStyle: {
      fontSize: 16,
      color: "#ffffff",
    },
  },
  tooltip: {
    trigger: 'axis',
    formatter:function(params) {
      let html = `${params[0].name}<br/>`;
      for (let i in params) {
        let param = params[i];
        html += `${param.seriesName}：<span style="color: #FFFFFF">${param.value}%</span><br />`;
      }
      return html;
    },
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
  },
  grid: {
    top: '10%',
    right: '5%',
    left: '10%',
    bottom: '10%',
  },
  xAxis: [
    {
      type: 'category',
      color: '#083952',
      axisLine: {
        lineStyle: {
          color: 'rgba(6, 47, 85, 1)',
        },
      },
      axisLabel: {
        color: '#FFF',
        fontSize: 14,
        margin: 10,
      },
      splitLine: {
        show: false
      },
      data: xAxisData,
    },
  ],
  yAxis: [
    {
      type: 'value',
      name: "贡献度",
      nameTextStyle: {
        color: "#ffffff",
        fontSize: 16,
        fontFamily: 'Source Han Sans CN',
        fontWeight: 400
      },
      min: 0,
      axisLabel: {
        show: true,
        textStyle: {
          color: '#FFF',
          fontSize: 14,
        },
        formatter: function(value, index){
          if(value) return `${value}%`
          return value
        }
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(131,101,101,0.5)',
          type: 'dashed',
        },
      }
    },
  ],
  series: [
    {
      name: seriesData[0].name,
      type: 'line',
      showAllSymbol: true,
      symbol: 'circle',
      symbolSize: 10,
      lineStyle: {
        normal: {
          color: 'rgba(61, 148, 254, 1)'
        },
      },
      label: {
        show: false,
        position: 'top',
        textStyle: {
          color: '#D0FF59',
        },
      },

      itemStyle: {
        color: '#FFF',
        borderColor: 'rgba(61, 148, 254, 1)',
        borderWidth: 2,
      },
      tooltip: {
        show: true,
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(61, 148, 254, 1)',
              },
              {
                offset: 1,
                color: 'rgba(61, 148, 254,0)',
              },
            ],
            false
          ),
        },
      },
      data: seriesData[0].data,
    },
    {
      name: seriesData[1].name,
      type: 'line',
      showAllSymbol: true,
      symbol: 'circle',
      symbolSize: 10,
      lineStyle: {
        normal: {
          color: 'rgba(253, 159, 89, 1)',
        },
      },
      label: {
        show: false,
        position: 'top',
        textStyle: {
          color: '#D0FF59',
        },
      },

      itemStyle: {
        color: '#FFF',
        borderColor: 'rgba(253, 159, 89, 1)',
        borderWidth: 2,
      },
      tooltip: {
        show: true,
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(253, 159, 89, 1)',
              },
              {
                offset: 1,
                color: 'rgba(253, 159, 89, 0)',
              },
            ],
            false
          ),
        },
      },
      data: seriesData[1].data,
    },
  ],
};


onMounted(() => {
  const chart = echarts.init(lineChart04.value)
  chart.setOption(option)
})
</script>

<style scoped></style>
